<template>
  <div class="table">
    <div class="table_title">
      <div class="table_title_item" v-for="(item, i) in titleData" :key="i" :style="item.style">{{ item.name }}</div>
    </div>
    <div class="table_content">
      <div v-if="valueData.length > 0">
        <div class="table_data" v-for="(item, i) in valueData" :key="i">
          <template v-for="(e, j) in titleData" :key="j">
            <div class="table_data_item btn" @click="clickBtn(item)" :style="e.style" v-if="e.type == 'btn'">
              {{ e.btns[0] }}
            </div>
            <div class="table_data_item" :class="e.align ? 'align' : ''" v-else :style="e.style">{{ getText(item, e) }}
            </div>
          </template>
        </div>
      </div>
      <div v-else style="color: #fff; font-size: 12px; padding:20px 0; text-align:center;">
        暂无数据
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted } from "vue"
const props = defineProps({
  titleData: {
    type: Array,
    default: null
  },
  valueData: {
    type: Array,
    default: null
  }
})
const emit = defineEmits(["clickBtn"])
const clickBtn = (e) => {
  emit("clickBtn", e)
}
const getText = (item, e) => {
  if (e.key === "is_solve") {
    if (item[e.key] === 1 || item[e.key] === "1") {
      return "待处理"
    } else if (item[e.key] === 2 || item[e.key] === "2") {
      return "已处理"
    } else if (item[e.key] === 3 || item[e.key] === "3") {
      return "处理中"
    } else if (item[e.key] === 4 || item[e.key] === "4") {
      return "已逾期"
    }
  }
  return item[e.key] || e.text
}
onMounted(() => { })
</script>
<style scoped lang="less">
.table {

  .table_title {
    padding: 5px 6px;
    color: rgba(77, 191, 222, 1);
    display: flex;
    align-items: center;
    background: rgba(77, 222, 207, 0.1);
    border: 1px solid rgba(77, 222, 207, 0.2);

    .table_title_item {
      font-size: 10px;
      text-align: center;
    }
  }

  .table_content {
    min-height: 200px;
  }

  .table_data {
    padding: 6px 6px;
    color: rgba(238, 249, 255, 1);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);

    .table_data_item {
      margin-top: 4px;
      font-size: 9px;
      text-align: center;
    }

    .btn {
      text-align: center;
      cursor: pointer;
      color: #4DBFDE;
    }
  }
}

.align {
  /*让长段文本不换行*/
  white-space: nowrap;
  /*设置文本超出元素宽度部分隐藏*/
  overflow-x: hidden;
  /*设置文本超出部分用省略号显示*/
  text-overflow: ellipsis;

}
</style>
